<template>
  <section class="settingMenu">
    <!-- <i class="el-icon-s-tools" @click='drawer = true'></i> -->
    <el-icon @click='openDrawer'>
      <Tools />
    </el-icon>
    <el-drawer title='配置列表项' v-model='drawer' :append-to-body="true" :size="660" @close="drawer = false">
      <draggable-columns v-if="drawer" ref="draggableColumns" :checkedColumns="checkedColumns" :columns="columns"
                         :lockedColumnsName="lockedColumnsName" />
      <el-button type="primary" style="margin-top: 20px;" @click="Msg_headConfig">保 存</el-button>
      <el-button type="warning" style="margin-top: 20px;" @click="resetSort">恢复默认排序</el-button>
    </el-drawer>
  </section>
</template>

<script>
import { headConfigQuery, headConfig } from "@/service/interface";

export default {
  name: "SettingMenu",
  props: {
    lockedColumnsName: {
      type: String,
    },
    originColumns: {
      type: Array,
    },
    bizType: {
      type: String,
    },
  },
  data() {
    return {
      drawer: false,
      checkedColumns: [],
      columns: [],
      tableColumns: [],
    };
  },
  mounted() {
    this.tableColumns = this.deepClone(this.originColumns);
    this.columns = this.tableColumns
      .map((item) => item.title)
      .filter((item) => item != "操作");
    this.Msg_headConfigQuery();
  },
  methods: {
    openDrawer() {
      this.drawer = true;
      this.Msg_headConfigQuery();
    },
    // 列表项配置
    Msg_headConfigQuery() {
      headConfigQuery({
        name: this.bizType,
      }).then((res) => {
        if (!(res && res.data)) {
          this.$emit("updateColumns", this.tableColumns);
          return;
        }
        this.checkedColumns = res.data.split(",");
        let temArr = [];
        let hasOptColumn;
        this.tableColumns.forEach((item) => {
          if (item.title != "操作") {
            item.show = this.checkedColumns.includes(item.title);
            let lockedColumns = [];
            if (localStorage.getItem(this.lockedColumnsName)) {
              lockedColumns = JSON.parse(
                localStorage.getItem(this.lockedColumnsName)
              );
            }
            if (lockedColumns.includes(item.title)) {
              item.fixed = true;
            } else {
              item.fixed = false;
            }
            if (item.show) {
              temArr.push(item);
            }
          } else {
            hasOptColumn = item;
          }
        });
        temArr.sort((a, b) => {
          return (
            this.checkedColumns.indexOf(a.title) -
            this.checkedColumns.indexOf(b.title)
          );
        });
        if (hasOptColumn) {
          temArr.push(hasOptColumn);
        }
        this.$emit("updateColumns", temArr);
      });
    },
    Msg_headConfig() {
      const draggableColumns = this.$refs.draggableColumns;
      if (
        !(
          draggableColumns.currentCheckedColumns &&
          draggableColumns.currentCheckedColumns.length
        )
      ) {
        this.tipMessage("至少保留一项", "error");
        return;
      }
      draggableColumns.setLocalStorage();
      this.checkedColumns = [...draggableColumns.currentCheckedColumns];
      headConfig({
        name: this.bizType,
        remark: this.checkedColumns.join(","),
      }).then((res) => {
        this.Msg_headConfigQuery();
        this.drawer = false;
      });
    },
    resetSort() {
      this.checkedColumns = this.columns;
    },
  },
};
</script>

<style lang="less" scoped>
.settingMenu {
  float: right;
  margin-top: 3.5px;
  margin-left: 12px;
  font-size: 25px;
  color: #1890ff;
  cursor: pointer;
}
.settingMenu:hover {
  opacity: 0.5;
}
/deep/.el-drawer__body {
  padding: 0 20px 20px;
}
</style>

